import React, { useState, useEffect, useCallback } from 'react'

function useWinSize() {
    const [size, setSize] = useState({
        with: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
    });

    const onResize = useCallback(() => {
        setSize({
            with: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        })
    }, []);

    useEffect(() => {
        window.addEventListener('resize', onResize);
        return () => {
            window.removeEventListener('resize', onResize);
        }
    }, [])

    return size;
}

function Example() {

    const size = useWinSize();
    return (
        <>
            page页面Size:{size.with}x{size.height}
        </>
    )
}

export default Example